<template>
  <div class="details">
    <div class="details_title">
      <h3>基础资料</h3>
    </div>
    <div class="details_text">
      <p>用户名：{{phone}}</p>
      <p>
        性别：
        <input type="radio" name="sex" v-model="sex" value="男" />男
        <input type="radio" name="sex" v-model="sex1" />女
      </p>
      <div class="details_img">
        <div>头像：</div>
        <div class="details_img_img">
          <img src="../../../assets/banner/1.jpeg" alt />
        </div>
      </div>
      <!-- //上传图片 -->
      <div>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="handleChange"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
    </div>
    <!-- //form  表单 -->
    <div class="deails_form">
      <el-form ref="form" :model="form" label-width="200px" width="400">
        <el-form-item label="登录密码：" size="mini">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="年龄" size="mini">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="身高：" size="mini">
          <el-input v-model="form.heights"></el-input>
        </el-form-item>
        <el-form-item label="体重：" size="mini">
          <el-input v-model="form.weibad"></el-input>
        </el-form-item>
        <el-form-item label="电话：" size="mini">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="微信号：" size="mini">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="风格">
          <!-- <el-checkbox-group v-model="ruleForm.type"> -->
          <el-checkbox label="西式婚礼" name="type"></el-checkbox>
          <el-checkbox label="中式婚礼" name="type"></el-checkbox>
          <el-checkbox label="汉唐婚礼" name="type"></el-checkbox>
          <el-checkbox label="商务主持" name="type"></el-checkbox>
          <el-checkbox label="宴会主持" name="type"></el-checkbox>
          <!-- </el-checkbox-group> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 视频资料 -->
    <div class="details_titles">
      <h3>视频资料</h3>
    </div>
    <!-- 视频的form -->
    <div class="form_h3">
      <el-form ref="form" :model="form" label-width="200px" width="400">
          <h3>视频一</h3>
            <el-form-item label="标题:" size="mini">
            <el-input v-model="form.title1"></el-input>
            </el-form-item>
            <el-form-item label="视频链接:" size="mini">
            <el-input v-model="form.video1" placeholder="目前的视频不太会"></el-input>
            </el-form-item>
             <h3>视频二</h3>
            <el-form-item label="标题:" size="mini">
            <el-input v-model="form.title2"></el-input>
            </el-form-item>
            <el-form-item label="视频链接:" size="mini">
            <el-input v-model="form.video2" placeholder="目前的视频不太会"></el-input>
            </el-form-item>
             <h3>视频三</h3>
            <el-form-item label="标题:" size="mini">
            <el-input v-model="form.title3"></el-input>
            </el-form-item>
            <el-form-item label="视频链接:" size="mini">
            <el-input v-model="form.video3" placeholder="目前的视频不太会"></el-input>
            </el-form-item>
        </el-form>
    </div>
    <!-- 个人介绍 -->
    <div class="details_titles">
      <h3>个人介绍</h3>
    </div>
    <div>
        <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
    </div>
    <!-- 保存 -->
    <div class="form_button">
        <el-button type='primary' @click="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  name: "Details",
  data() {
    return {
      sex: "男",
      sex1: "nv",
      form: {},
      ruleForm: {},
      phone:"",
      msg:'<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
      myConfig:{
            // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 240,
      // 初始容器宽度
      initialFrameWidth: '100%',
   
      // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
      UEDITOR_HOME_URL: '/UEditor/'
      },
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ]
    };
  },
  methods: {
      //上传图片的一个函数t
    handleChange() {
      this.fileList = fileList.slice(-3);
    },
    //最后保存提交的函数
    onSubmit(){

    }
  },
  components:{
      VueUeditorWrap
  },
mounted(){
    //   vuex获取用户的用户名
    this.phone=this.$store.state.LoginModule.phone
}
    
};
</script>

<style lang="less" scoped>
.details {
  width: 80%;
  border: solid 1px #000;
  margin-bottom: 10px;
  padding: 30px 0;
  box-sizing: border-box;

  .details_title {
    width: 90%;
    background-color: #cccccc;
    font-size: 18px;
    font-weight: 600;
    margin: auto;
    h3 {
      margin-left: 15px;
    }
  }
  .details_text {
    padding: 30px 100px;
    p {
      font-size: 14px;
      line-height: 25px;
    }
  }
  .details_img {
    // width: 200px;
    display: flex;
    margin-bottom: 20px;

    img {
      width: 150px;
      height: 100px;
    }
  }
}
.deails_form {
  width: 50%;
}
.details_titles {
  width: 90%;
  background-color: #cccccc;
  font-size: 18px;
  font-weight: 600;
  margin: 10px auto;
  h3 {
    margin-left: 15px;
  }
}
.form_h3{
    h3{
        margin-left: 100px; 
    }
    width: 50%;
}
.form_button{
    margin-top: 20px;
    text-align: center;
}
</style>